$(function () {
  // 给退出登录按钮注册事件
  $('.logout').on('click', function () {
    // 点击退出登录，提示是否确定退出
    layer.confirm('确定退出登录吗？', {icon: 3, title:'提示'}, function(index){
      // 清空本地存储
      localStorage.removeItem('token')
      // 跳转到登录页面
      location.href = '/login.html' 
      // 关闭弹出层
      layer.close(index);
    });
  })

  // 获取用户信息的函数
  function initUserInfo() {
    axios.get('/my/userinfo',
      {
        // 自定义请求头，访问有权限
        headers: {Authorization:localStorage.getItem('token')}
      })
      .then(function ({ data: res }) {
        // 请求登录成功的回调
         renderUserInfo(res.data)
      }, function (error) {
        // 判断响应状态码是否401.如果是401，证明没有上传服务器登录信息或者假信息
        if (error.response.status === 401) {
          // 清空假的登录请求信息
          localStorage.removeItem('token')
          // 跳转到登录页面
          location.href = '/login.html'
        }
    })
  }
  // 调用获取用户信息函数
  initUserInfo()


  // 渲染用户信息部分
  function renderUserInfo(data) {
     // 获取用户昵称或用户名首字母
     const name = data.nickname || data.username
     // 根据字符索引获取首字母，转换大写
     const textAvatar = name.charAt().toUpperCase()
    
    
    // 渲染顶部用户信息
    // 判断用户是否上传头像
    if (data.user_pic) {
      $('#header-avatar').html(
        ` <img src="${data.user_pic}"
          class="layui-nav-img">
          个人中心`
      )
    } else {
      // 如果用户没有上传头像，渲染默认文本头像
      $('#header-avatar').html(` 
        <div class="text-avatar">${textAvatar}</div>
        个人中心`
      )
    }

    // 渲染侧边栏用户信息
    // 判断用户是否上传头像
    if (data.user_pic) {
      $('.user-info-box').html(
        `<img src="${data.user_pic}"
         class="layui-nav-img">
         <span class="welcome">&nbsp;欢迎&nbsp; xxx</span>`
      )
    } else {
      $('.user-info-box').html(
        `<div class="text-avatar">${textAvatar}</div>
        <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>`
      )
    }

    // 使用layui动态创建元素失去动画效果
    // 在页面动态元素创建好后，重新渲染指定区域效果
    // 第一个参数渲染区域，第二个参数指定具体渲染区域
    layui.element.render('nav','header-nav')
  }
  
})